<template>
	<view class="content">
		<u-navbar :title="`注销${data.utype == 1 ? '企业' : '个人'}账号`" :border-bottom="false"></u-navbar>
		<view class="u-flex content_tip">
			<u-icon name="info-circle-fill" color="#FF7109"></u-icon>
			<view class="u-m-l-10">
				注销账号后将删除您的所有会员数据，永久注销。谨慎操作！
			</view>
		</view>
		<view class="content_main">
			<view class="content_main_tp">
				<view v-if="data.utype == 1">
					<view>注销之后，您将放弃以下权益：</view>
					<view>1.您下载的简历将被清空且无法恢复，请提前备份。</view>
					<view>2.请的企业信息、职位信息、网站积分等会员权益将被清空且无法恢复。</view>
					<view>3.注销申请提交后，请耐心等待平台处理。</view>
				</view>
				<view v-else>
					<view>注销之后，您将放弃以下权益：</view>
					<view>1.您的简历和求职记录将被清空且无法恢复。</view>
					<view>2.您的身份信息、资料信息、网站积分等会员权益将被清空且无法恢复。</view>
					<view>3.注销申请提交后，请耐心等待平台处理。</view>
				</view>
			</view>
			<view class="content_main_btm">
				<view class="u-font-32 u-font-weight">
					验证身份
				</view>
				<view class="u-m-t-70">
					<view class="u-flex">
						<text class="u-m-r-10">手机号</text>
						<u-input v-model="data.mobile" disabled :custom-style="data.customStyle"></u-input>
					</view>
					<view class="u-flex u-m-t-36">
						<text class="u-m-r-10">验证码</text>
						<u-input placeholder="请输入验证码" v-model="data.code" :custom-style="data.customStyle" type="number"
							maxlength="4"></u-input>
						<u-button class="u-m-l-20"  hoverClass="none" :customStyle="data.customstyle1"
							@click="isCaptchaClick">{{data.codeText}}</u-button>
					</view>
				</view>
				<view class="content_main_btm_button">
					<u-button   hoverClass="none" :customStyle="data.customstyle" @click="isLogOffClick">提交申请</u-button>
				</view>
			</view>
		</view>
		<u-verification-code ref="uCode" @change="codeChange" keep-running unique-key="logOff"></u-verification-code>
		<u-modal v-model="data.isLogOff" title="系统提示" content="您确定要注销当前账号吗？" confirmText="注销" showCancelButton
			@confirm="handleSubmit"></u-modal>
		<u-captcha v-model="data.isCaptcha" @cancel="data.isCaptcha = false" @confirm="getCode"></u-captcha>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useUserStore
	} from '/stores/userInfo.js'
	const useUser = useUserStore()
	const data = reactive({
		customstyle1:{
			color:'#00d075',
			background:'#fff',
			bordern:'none'
		},
		customstyle:{
			color:'#fff',
			background:'#00d075',
			bordern:'none'
		},
		utype: uni.getStorageSync('utype'),
		mobile: '',
		phone:useUser.userInfo.mobile,
		codeText: '',
		customStyle: {
			backgroundColor: '#F6F6F6',
			padding: '10rpx 20rpx',
			color: '#a6a6a6'
		},
		// 注销弹窗
		isLogOff: false,
		// 验证码弹窗
		isCaptcha: false,
	})
	const pageInstance = getCurrentInstance()
	onLoad(() => {
		data.mobile = useUser.userInfo.mobile.replace(/(\d{3})\d{4}(\d{4})/,
			"$1****$2")
	})
	// 验证码弹窗
	const isCaptchaClick = () => {
		if (pageInstance.refs.uCode.canGetCode) {
			data.isCaptcha = true
		}
	}
	// 提交申请弹窗
	const isLogOffClick = () => {
		if (!uni.$u.test.code(data.code, 4)) return uni.$u.toast('请输入正确的验证码')
		data.isLogOff = true
	}
	// 提交
	const handleSubmit = async () => {
		let params = {
			phone: data.phone,
			code: data.code
		}
		let res = await uni.$u.api.getLogOff(params)
		uni.$u.toast('申请成功')
		useUser.getLogout()
	}
	// 验证码倒计时
	const codeChange = (text) => {
		data.codeText = text;
	}
	// 点击获取验证码
	const getCode = async (value) => {
		data.isCaptcha = false
		if (pageInstance.refs.uCode.canGetCode) {
			if (!uni.$u.test.mobile(data.phone)) return uni.$u.toast('请输入正确的手机号')
			let params = {
				mobile: data.phone,
				utype: data.utype,
				captcha: value
			}
			let config = {
				custom: {
					loading: true
				}
			}
			let res = await uni.$u.api.getCancelApply(params, config)
			if (res) {
				uni.$u.toast('验证码已发送')
				pageInstance.refs.uCode.start();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		&_tip {
			background-color: #fff7f2;
			color: #FF7109;
			font-size: 24rpx;
			padding: 20rpx
		}

		&_main {
			&_tp {
				font-size: 28rpx;
				color: #636363;
				padding: 60rpx;
				border-bottom: 1rpx dashed #E0E0E0;

				view {
					margin-bottom: 10rpx;
				}
			}

			&_btm {
				color: #444444;
				text-align: center;
				padding: 70rpx 60rpx;

				&_button {
					margin-top: 88rpx;
				}
			}
		}
	}
</style>